<template>
  <div class="pd30 produceFactory maintenanPersonList">
    <div class="panelWrap">
      <div class="title flex flexac flexjcsb fs14 cfff fwb pl p-r-20">
        <div>添加人员</div>
      </div>
      <div class="con">
        <div class="con-row flex flexac search-box flexwrap">
          <div class="flex flexac m-l-20">
            <!-- <span class="nameText">姓名：</span> -->
            <el-input v-model="param.name" class="id-input" placeholder="请输入维保人姓名" @input="getsMaPersonList" />
          </div>
          <!-- <div class="flex flexac m-l-20">
            <span class="nameText">手机号码：</span>
            <el-input v-model="param.phone" class="phone-input" placeholder="请输入手机号码" />
          </div>
          <div class="flex flexac m-l-20">
            <span class="nameText">证件号码：</span>
            <el-input v-model="param.certNo" class="co-input" placeholder="请输入证件号码" />
          </div> -->
          <div class="groupbtn flex m-l-60">
            <el-button class="flex flexac m-r-20 fs14" size="small" type="warning" @click="getsMaPersonList"><i class="co-i" /><span class="search1">查 询</span></el-button>
            <el-button class="co-empty  flexcenter m-l-25" type="info" @click="handleEmptySearch"><i class="iconfont icon-qingkong" />清 空</el-button>
          </div>
        </div>
        <div class="con-row flex flexac flexjcsb pl">
          <div>
            <el-button class="defaultbtn" type="primary" @click="handleRefresh"><i class="el-icon-refresh" :class="refresh?'goRefresh':''" />刷 新</el-button>

          </div>
          <div class="m-r-25 flex">
            <el-button type="success" class="defaultbtn" @click="handleAddMaintenance(0)"><i class="iconfont icon-xinzeng mr3" />添加人员</el-button>
            <!-- <el-button class="defaultbtn" type="success" @click="handleImport"><i class="iconfont icon-daoru mr3" />导入</el-button> -->

            <!-- <el-button class="defaultbtn" @click="handleAdd" type="primary"><i class="el-icon-circle-plus-outline"></i>添加</el-button> -->
            <el-button class="defaultbtn" type="primary" @click="handleExportExcel"><i class="iconfont icon-wenjiandaochu" />导出</el-button>
            <div class="pre m-l-10">
              <el-button class="defaultbtn pre" type="primary" @click="handleSenior('field')"><i class="iconfont icon-lie" />字段
              </el-button>
              <div class="selectUl br1" :class="seniorSet.field?'showSelectUl':'hideSelectUl'">
                <div v-for="(item,i) in tablehead" :key="i" class="li">
                  <el-checkbox v-model="item.isShow">{{ item.label }}</el-checkbox>
                </div>
              </div>
            </div>
            <div class="pre m-l-10">
              <el-button class="defaultbtn" type="primary" @click="handleSenior('sortable')"><i class="iconfont icon-paixu" />排序</el-button>
              <div class="selectUl br1" :class="seniorSet.sortable?'showSelectUl':'hideSelectUl'">
                <div v-for="(item,i) in tablehead" v-if="item.isShow" :key="i" class="li">
                  <el-checkbox v-model="item.sortable">{{ item.label }}</el-checkbox>
                </div>
              </div>
            </div>
          </div>
        </div>
        <el-table
          id="factorytable"
          ref="factorytable"
          class="con-table"
          type="expand"
          :data="factorytable"
          style="width: 100%"
        >

          <template v-for="(item,i) in tablehead">
            <el-table-column v-if="item.isShow" :key="i" align="center" :width="item.width" :sortable="item.sortable" :show-overflow-tooltip="true" :prop="item.prop" :label="item.label" />
          </template>

          <!-- <el-table-column label="证件类型" align="center">
            <template slot-scope="scope">
              <span>{{ scope.row.certType ? '身份证' : '工作证' }}</span>
            </template>
          </el-table-column> -->

          <el-table-column label="证件号码" align="center">
            <template slot-scope="scope">
              <span>{{ scope.row.certNo }}</span>
            </template>
          </el-table-column>

          <el-table-column label="性别" align="center">
            <template slot-scope="scope">
              <span>{{ sex[scope.row.sex-1] }}</span>
            </template>
          </el-table-column>

          <el-table-column label="学历" align="center" >
            <template slot-scope="scope">
              <span>{{ scope.row.education }}</span>
            </template>
          </el-table-column>

          <el-table-column label="描述" align="center">
            <template slot-scope="scope">
              <span>{{ scope.row.remark }}</span>
            </template>
          </el-table-column>

          <!-- prop="name" -->
          <el-table-column label="基本操作" align="center">
            <template slot-scope="scope">
              <el-button class="defaultbtn" type="primary" plain size="mini" @click="handleEdit(scope.$index, scope.row)">
                <i class="el-icon-edit" />
                编辑</el-button>
              <el-button type="danger" class="defaultbtn" @click="handleDeleteBtn(scope.$index, scope.row)"><i class="el-icon-delete-solid" />删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination class="paginationWrap flex " :current-page="paging.currentPage" :page-sizes="paging.pageSizeArr" :page-size="paging.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="paging.total" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
      </div>
    </div>
    <PersonDialog v-model="personVisible" :is-edit="isEdit" :data="personData" @handleRefresh="handleRefresh" @handleCloseDialog="handleCloseDialog" />
  </div>
</template>

<script>

import PersonDialog from './dialog/index'
import { maStaffList, staffDelete } from '@/api/maintenance/maintenance'
import { showNotice, formatDateTime } from '@/utils/toolclass'

export default {
  name: 'Unnamed',
  components: { PersonDialog },
  props: {},
  data() {
    return {
      sex:['男','女'],
      paging: {
        currentPage: 1,
        pageSize: 10,
        pageSizeArr: [10, 20, 50, 100],
        total: 0
      },
      factorytable: [],
      param: {
        id: '',
        name: '',
        isMaintenancePerson: ''
      },
      personData: {},
      isEdit: false,
      personVisible: false,
      selectDataLength: 0,
      refresh: false,
      seniorSet: {
        'field': false,
        'sortable': false
      },
      tablehead: [
        {
          index: 0,
          prop: 'index',
          label: '序号',
          width: '60',
          sortable: false,
          fixed: true,
          isShow: true
        },
        {
          index: 1,
          prop: 'name',
          label: '姓名',
          width: '100',
          sortable: false,
          fixed: true,
          isShow: true
        },
        // {
        //   index: 2,
        //   prop: 'unitName',
        //   label: '维保单位名称',
        //   sortable: false,
        //   fixed: true,
        //   isShow: true
        // },
        // {
        //   index: 3,
        //   prop: 'certType',
        //   label: '证件类型',
        //   sortable: false,
        //   fixed: true,
        //   isShow: true
        // },
        {
          index: 5,
          prop: 'phone',
          label: '联系电话',
          width: '120',
          sortable: false,
          fixed: true,
          isShow: true
        }
        // {
        //   index: 4,
        //   prop: 'certNo',
        //   label: '证件号',
        //   sortable: false,
        //   fixed: true,
        //   isShow: true
        // }
      ]

    }
  },
  computed: {},
  watch: {},
  created() {
    this.getsMaPersonList()
  },
  mounted() {
    // 设置缓存
    this.$storage.set('upUrl', JSON.stringify({ 'path': '/personQuery' }))
  },
  methods: {
    // 导入
    handleCloseDialog() {
      this.personVisible = !this.personVisible
    },
    // handleImport() {
    //   this.$router.push({ path: '/importExcel' })
    // },
    // 添加维保人员
    handleAddMaintenance(id) {
      this.personData = {
        id: 0,
        name: '胡春雨', // 姓名
        sex: 1,
        certType: 1,
        phone: '13602703461', // 联系电话
        certNo: '430426199601097212',
        education: '大专',
        installCertNo: '',
        isTechnician: true, // 是否专业技术人员
        isWorkman: false, // 是否作业人员
        // joinWorkTime: '2020-07-08',
        isPurchaseInsurance: true, // 是否购买保险
        remark: '',
        version: '', //
        skillLevel: '', // 技术等级
        unitId: '', //
        unitName: '', // 维保单位名称
        majorTypeval: 1,
        technicalTitle: '', // 技术职称
        workmanProfessionCert: '',
        workmanTechniqueCert: ''

      }
      this.isEdit = false
      this.personVisible = true
      // this.$router.push({ path: '/person', query: { obj: id }})
    },
    // 筛选
    handleSenior(type) {
      if (type === 'field') {
        this.seniorSet.field = !this.seniorSet.field
        this.seniorSet.sortable = false
      }
      if (type === 'sortable') {
        this.seniorSet.field = false
        this.seniorSet.sortable = !this.seniorSet.sortable
      }
    },
    // 导出
    handleExportExcel() {
      require.ensure([], () => {
        const { export_json_to_excel } = require('@/excel/Export2Excel')
        const tHeader = ['ID', '姓名', '性别', '联系电话', '证件类型', '证件号', '技术等级', '技术职称', '是否专业技术人员', '是否作业人员', '是否购买保险']
        const filterVal = ['id', 'name', 'sex', 'phone', 'certType', 'certNo', 'skillLevel', 'technologytitle', 'isTechnician', 'isWorkman', 'isPurchaseInsurance']
        const data = this.formatJson(filterVal, this.factorytable)
        export_json_to_excel(tHeader, data, '人员列表(' + formatDateTime().ymd) + ')'
      })
    },
    formatJson(filterVal, jsonData) {
      return jsonData.map(v => filterVal.map(j => v[j]))
    },
    // 刷新
    handleRefresh() {
      this.refresh = true
      this.getsMaPersonList()
      setTimeout(() => {
        this.refresh = false
      }, 1200)
    },
    // 获取维保人员列表
    getsMaPersonList() {
      maStaffList(this.param.id, false, this.param.name, this.paging.currentPage, this.paging.pageSize).then((res) => {
        if (res.code === '000000') {
          // console.log(res)
          this.factorytable = res.data.map((item, i) => {
            const items = {
              index: i + 1,
              certNo: item.certNo,
              certType: item.certType,
              duties: item.duties,
              education: item.education,
              id: item.id,
              installCertNo: item.installCertNo,
              isPurchaseInsurance: item.isPurchaseInsurance,
              isTechnician: item.isTechnician,
              isWorkman: item.isWorkman,
              joinWorkTime: item.joinWorkTime,
              majorType: item.majorType,
              name: item.name,
              phone: item.phone,
              remark: item.remark,
              sex: item.sex,
              skillLevel: item.skillLevel,
              technicalTitle: item.technicalTitle,
              unitId: item.unitId,
              unitName: item.unitName,
              version: item.version,
              workmanProfessionCert: item.workmanProfessionCert,
              workmanTechniqueCert: item.workmanTechniqueCert
            }
            return items
          })
          this.paging = {
            currentPage: res.pager.pageIndex,
            pageSize: res.pager.pageSize,
            total: res.pager.totalSize
          }
        }
      })
    },
    // 清空查询输入框
    handleEmptySearch() {
      this.param.id = ''
      this.param.name = ''
      this.getsMaPersonList()
    },
    // 编辑维保人员
    handleEdit(index, row) {
      this.isEdit = true
      this.personVisible = true
      // console.log(row)
      this.personData = {
        id: row.id,
        name: row.name,
        sex: row.sex,
        certType: row.certType === 1 ? '身份证' : '身份证',
        phone: row.phone,
        certNo: row.certNo,
        education: row.education === '0' ? '初中' : row.education === '1' ? '中专' : row.education === '2' ? '高中' : row.education === '3' ? '大专' : row.education === '4' ? '本科' : row.education === '5' ? '硕士' : '博士',
        installCertNo: row.installCertNo === '1' ? '电梯修理' : '维护保养',
        isTechnician: !!row.isTechnician,
        isWorkman: !!row.isWorkman,
        joinWorkTime: row.joinWorkTime,
        isPurchaseInsurance: !!row.isPurchaseInsurance,
        remark: row.remark,
        version: row.version, //
        skillLevel: row.skillLevel === '1' ? '一级' : row.skillLevel === '2' ? '二级' : row.skillLevel === '3' ? '三级' : row.skillLevel === '4' ? '四级' : '五级', //
        unitId: row.unitId, //
        unitName: row.unitName, //
        majorType: row.majorType === '0' ? 'T1' : row.majorType === '1' ? 'T2' : row.majorType === '2' ? 'T3' : 'A4',
        technicalTitle: row.technicalTitle === '1' ? '初级' : row.technicalTitle === '2' ? '中级' : row.technicalTitle === '3' ? '高级' : row.technicalTitle === '4' ? '技工' : '高级技工',
        workmanProfessionCert: row.workmanProfessionCert, //
        workmanTechniqueCert: row.workmanTechniqueCert === '1' ? '电梯修理' : '维护保养'

      }
      // this.$router.push({ path: '/person', query: { obj: row }})
    },
    // 删除维保人员
    handleDeleteBtn(index, row) {
      this.$alert('这个操作会删除和它相关联的所有数据,确定要删除吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        showCancelButton: true,
        callback: action => {
          if (action === 'confirm') {
            this.handleDelete(row.id)
          }
        }
      })
    },
    handleDelete(id) {
      staffDelete(id).then((res) => {
        if (res.code === '000000') {
          showNotice('success', '提示', '删除成功')
          this.getsMaPersonList()
        }
      })
    },
    // 分页
    handleSizeChange(val) {
      this.paging.pageSize = val
      this.getsMaPersonList()
    },
    handleCurrentChange(val) {
      this.paging.currentPage = val
      this.getsMaPersonList()
    }
  }
}
</script>
<style scoped lang="scss">
.inputLable{
  .nameText{
    font-size: 14px;
    margin-left: 26px;
  }
  input{
    width: 180px !important;
  }
}
.id-input {
  width: 260px;
}
.phone-input {
  width: 200px;
}
</style>
